<template>
    <view-box style="background:#F3F6F7;">
        <div style="width:100%;background:#fff;">
            <div style="height:15px;background:#fff;"></div>
            <div class="botr-detea">
                <div class="wid-detail ">
                    <p style="font-size:15px;font-weight: 600;">{{Position.position_name}}</p>
                    <p style="font-size:13px;color:#bababa;">  {{Position.city}} | {{Position.age_limit}} | {{Position.nature}}</p>
                </div>
                 <div class="wid-detail" style="text-align: right;">
                    <p style="font-size:13px;color:#32B6C6;padding-right:12px;">{{Position.pay}}</p>
                    <p style="font-size:13px;color:#bababa; padding-right:12px;">{{Position.created_at}}</p>
                </div>
            </div>
            <div class="gs-detou" @click="$router.push('/Companydetails?id=' + Position.company_info.uid)">
                <div class="img-detaou">
                    <!-- <img :src="Position.company_info.logo" alt=""> -->
                    <img :src="$apiUrl + '/storage/' + Position.company_info.logo" alt="">
                </div>
                <div class="ma-detail">
                    <p style="font-size:14px;">{{Position.company_info.cname}}</p>
                     <p style="font-size:14px;color:#bababa">
                        <span>{{Position.company_info.hangye}}</span>
                        <span>{{Position.company_info.renshu}}</span>
                        <span>{{Position.company_info.xingzhi}}</span>
                     </p>
                </div>
                <p class="pos-deti"><i slot="iocn" class="iconfont icon-youbian"></i></p>
            </div>
        </div>
            <div class="backgrou-bore">
                <div style="height:0px;"></div>
                <!-- <div class="wid-deit">
                    <p style="line-height:55px;margin-left:15px;">
                        <span style="font-size:16px;color:#bababa;">面试时间：</span>
                        <span style="font-size:16px;">2018-11-05 15:30</span>
                    </p>
                </div> -->
                <div style="height:40px;"></div>
                <div class="wid-deit">
                    <p style="line-height:55px;margin-left:15px;">
                        <span style="font-size:16px;color:#bababa;">公司地点：</span>
                        <span style="font-size:16px;">{{Position.province}}{{Position.city}}{{Position.area}}{{Position.detailed_address}}</span>
                    </p>
                </div>
                <div style="height:15px;"></div>
                <div class="wid-deit">
                    <p style="line-height:55px;margin-left:15px;">
                        <span style="font-size:16px;color:#bababa;">联系方式：</span>
                        <span style="font-size:16px;">{{Position.phone}}</span>
                    </p>
                </div>
                <div style="height:15px;"></div>
                <div class="wid-deit">
                    <p class="comg-post"> 职位详情</p>
                    <p class="comg-deta">{{Position.job_description}}</p>
                </div>
            </div>
               <div class="pomhg">
                <confirm v-model="pomhg"
                    @on-confirm="onConfirm"
                    @on-cancel="onHide"
                    confirm-text="显示"
                    cancel-text="不显示">
                    <p style="text-align:center;color:#32B6C6;">是否对该企业显示人才评估结果</p>
                </confirm>
               </div>
        <div class="bottom-posty">
            <!-- <button>立即沟通</button> -->
             <button class="left-buttom-c" style="color:#bababa;" v-if="Position.is_follow !== 0"><i slot="icon" class="iconfont icon-dianjiquxiaoguanzhu"></i> 已关注</button>
             <button @click="updata(Position.id)" class="left-buttom-c" v-if="Position.is_follow === 0"><i slot="icon" class="iconfont icon-dianjiguanzhu"></i> 关注</button>
            <button  class="post-buttom-sed" v-if="Position.is_send !== 0">已投递</button>
            <button @click="saveup" class="post-buttom-c" v-if="Position.is_send === 0">投递简历</button>
        </div>
        <!--<items :items="items"></items>-->
    </view-box>
</template>

<script>
import { ViewBox, Box, Tab, TabItem, Swiper, SwiperItem, Flexbox, FlexboxItem, Confirm } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Flexbox,
    FlexboxItem,
    Confirm
  },
  data () {
    return {
      pomhg: false,
      Position: {
        position_name: null,
        pay: 0,
        zhiwei: '',
        company_address: '',
        scale: '',
        nature: '',
        company_industry: '',
        company_profile: '',
        company_image: '',
        phone: '',
        age_limit: '',
        work_address: '',
        welfare: '',
        job_description: '',
        company_info: {
          logo: '',
          cname: '',
          hangye: '',
          renshu: '',
          xingzhi: '',
          jianjie: '',
          dizhi: ''
        }
      }
    }
  },
  mounted () {
    this.details()
  },
  methods: {
    saveup () {
      this.pomhg = true
    },
    onConfirm (msg) {
      this.save(1)
    },
    onHide () {
      this.save(0)
    },
    details () {
      console.log(this.rid)
      this.$http.get('/lookOnePosition?id=' + parseInt(this.$route.query.rid)).then(response => {
        this.Position = response.data
        console.log(response.data)
      }).catch(error => {
        console.log(error)
      })
    },
    save (id) {
      this.$http.post('/positionApply', {
        position_id: this.Position.id,
        is_pinggu: id
      }).then(response => {
        this.$vux.toast.show({
          text: '申请成功',
          type: 'text'
        })
        this.details()
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    },
    updata (id) {
      this.$http.post('/follow', {
        position_id: id
      }).then(response => {
        this.$vux.toast.show({
          text: '关注成功',
          type: 'text'
        })
        this.details()
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
    .vux-slider {
        height: 100%;
    }
    .myapplyForther{
        width: 100%;
        height: 79px;
        display:flex;
        background: #000;
    }
    .myapplyForther p{
        width: 100%;
        height: 79px;
        line-height: 43px;
    }
    .myapplyForther span{
        font-size:27.49px;
        color: #fff;
    }
    .myapply-ciong{
        width: 100%;
        background: #fff;
        height: 132.8px;
        display: flex;
    }
    .myapply-ciong p{
        width: 50%;
        flex-wrap: wrap;
        line-height: 10px;
    }
    .myapply-span1{
        font-size: 18.499px;
        color:#333333;
        width: 100%;
        margin-top: 20px;
        display:inline-block
    }
    .myapply-span2{
        width: 100%;
        font-size: 16.49px;
        color:#fe0001;
        margin-top: 20px;
        display:inline-block
    }
    .myapply-span3{
        width: 100%;
        font-size:14px;
        color: #999999;
        margin-top: 20px;
        display:inline-block
    }
.botr-detea{
    width: 100%;
    display: flex;
    height: auto;
    background: #fff;

}
.wid-detail{
    width: 94%;
    margin-left: 3%;
    height: auto;
    line-height: 40px;
}
.gs-detou{
    width: 92%;
    display: flex;
    background: #fff;
    margin-left: 4%;
    border-radius: 8px;
    position: relative;
    bottom: -30px;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1)
}
.img-detaou{
    width: 30%;
}
.img-detaou img{
    width: 50px;
    height: 50px;
    margin: 20px;
    border-radius: 50px;
}
.ma-detail{
    display: grid;
    align-items: center;
}
.pos-deti{
    position: absolute;
    right: 10px;
    top: 40px;
}
.text-cpoj{
    width: 100%;

}
.comg-post{
 width: 94%;
font-size: 16px;
margin-left: 3%;
height: 40px;
line-height: 40px;
font-weight: 600;
}
.comg-deta{
    width: 94%;
    font-size: 13px;
    margin-left: 3%;
    line-height: 30px;
    color: #bababb
}
.bottom-posty{
    width: 100%;
    height: 50px;
    position: fixed;
    background: #fff;
    bottom: 0px;
    left: 0px;
}
.left-buttom-c{
    width: 40%;
    height: 40px;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 0px;
    color: #32B6C6;
    margin-top: 5px;
    font-size: 16px;
    float: left;
}
.post-buttom-c{
    width: 30%;
    height: 40px;
    margin-right: 10%;
    background: #32B6C6;
    border: 1px solid #32B6C6;
    border-radius: 16px;
    color: #fff;
    float: right;
    margin-top: 5px;
}
.post-buttom-sed{
    width: 30%;
    height: 40px;
    margin-right: 10%;
    background: #bababa;
    border: 1px solid #bababa;
    border-radius: 16px;
    color: #fff;
    float: right;
    margin-top: 5px;
}
.backgrou-bore{
    width: 100%;
    height: 500px;
}
.wid-deit{
    width: 92%;
    margin-left: 4%;
    background: #fff;
    border-radius: 7px;
}
</style>
<style>
.pomhg .weui-dialog__btn_primary {
    color: #fff!important;
    background: #32B6C6!important;
}
.pomhg .weui-dialog__btn_default {
  color: #fff!important;
  background:#E6E6E6!important;
}
</style>
